<template>
  <div class="outsourcingNewApply">
    <van-nav-bar
      title="新申请"
      @click-right="goSetting"
      :fixed="true"
      :border="false"
      left-arrow
      @click-left="goBackHandle"
      :safe-area-inset-top="true"
      style="padding-top: 0px"
    >
      <template #right>
        <van-icon name="setting" size="18" color="#000" />
      </template>
    </van-nav-bar>
    <div class="dataContent">
      <div class="content" v-if="active === 0 && role == 0">
        <div @click="goLeave(1)" class="iconItem">
          <van-icon name="debit-pay" size="30" />
          <p>请假</p>
        </div>
        <div @click="goLeave(2)" class="iconItem">
          <van-icon name="desktop-o" size="30" />
          <p>加班</p>
        </div>
         <div @click="goLeave(3)" class="iconItem">
           <van-icon name="comment-circle-o" size="30"/>
          <p>漏打卡</p>
        </div>
      </div>
    </div>
    <!-- 底部导航 -->
    <van-tabbar v-model="active" @change="onChange" v-if="role == 0">
      <van-tabbar-item icon="description">新申请</van-tabbar-item>
      <van-tabbar-item icon="completed">已提交</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import backMixin from '@/backMixin'
export default {
  name: 'outsourcingNewApply',
  mixins: [backMixin],
  data() {
    return {
      active: 0,
      isBack: 55,
      role: 0 //权限  0，外包，1部门主管，2HR
    }
  },
  mounted() {},
  methods: {
    // 点击右边图标
    goSetting() {
      console.log('点击右图标')
      this.$router.push({
        name: 'settingPage',
        params: { role: this.role, path: '/outsourcingNewApply' }
      })
    },
    goLeave(val) {
      if (val === 1) {
        // 跳转到请假页面
        this.$router.push('/askOff')
      } else if (val === 2) {
        // 跳转到加班页面
        this.$router.push('/overTime')
      } else if (val === 3) {
        // 跳转到漏打卡页面
        this.$router.push('/missing')
      }
    },
    onChange(index) {
      if (index == 1) {
        console.log(index)
        this.active = 0
        this.$router.push({
          name: 'workbench',
          params: {
            role: this.role
          }
        })
      } else {
        // 当前页面
        this.active = 0
      }
    },
    // 点击返回按钮
    goBackHandle() {
      this.finishInApp()
    },
    // 判断当前系统是否为iOS系统
    IsIOS() {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        return true
      } else {
        return false
      }
    },
    // 判断当前系统是否安卓系统
    IsAndroid() {
      if (/(Android|Adr)/i.test(navigator.userAgent)) {
        return true
      } else {
        return false
      }
    },
    finishInApp() {
      this.$router.push({ name: 'login' })
      // if (this.IsIOS()) {
      //   window.webkit.messageHandlers.LinkToDfitcNativeFunction.postMessage(
      //     '9918'
      //   )
      // } else if (this.IsAndroid()) {
      //   window.smartinfo.LinkToDfitcNativeFunction('9918')
      // }
    }
  }
}
</script>
<style lang="less" scoped>
.outsourcingNewApply:deep {
  margin: 0;
  padding: 0;
  .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
  .van-nav-bar__content {
    .van-nav-bar__title {
      font-size: 18px;
    }
  }
  .dataContent {
    padding: 30px 0 20px 0;
    .content {
      margin-top: 1.49333rem;
      display: flex;
      justify-content: space-between;
      padding: 0 calc(10% - 5px);
      .iconItem {
        font-size: 0.42667rem;
        text-align: center;
        /* padding-left: 0.8rem; */
        width: 30%;
        .van-icon {
          padding: 10px;
          background: #e3efff;
          border-radius: 30px;
        }
      }
    }
  }
}
</style>
